<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改用户 - UnaBoot</title>
    <link rel="icon" href="${una}/ub-admin/img/favicon.png" type="image/x-icon">
    <link rel="shortcut icon" href="${una}/ub-admin/img/favicon.png" type="image/x-icon">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <link rel="stylesheet" href="${una}/ub-admin/plugin/fontawesome-free/css/all.min.css">
    <link rel="stylesheet" href="${una}/ub-admin/css/font-awesome.css">
    <link rel="stylesheet" href="${una}/ub-admin/css/ionicons.css">
    <link rel="stylesheet" href="${una}/ub-admin/css/adminlte.css">
    <link rel="stylesheet" href="${una}/ub-admin/plugin/layer/skin/default/layer.css">
    <link rel="stylesheet" href="${una}/ub-admin/css/unaboot-admin.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700">
</head>
<body class="sidebar-mini layout-fixed layout-navbar-fixed text-md <!--sidebar-collapse-->">
    <div class="wrapper">
        <nav class="main-header navbar navbar-expand navbar-white navbar-light">
            <#include "/admin/inc/header.html">
        </nav>
        <aside class="main-sidebar sidebar-dark-primary ">
            <#include "/admin/inc/aside.html">
        </aside>
        <div class="content-wrapper bg-gray-custom">
            <div class="content-header pb-0">
                <div class="row mb-2">
                    <div class="col-12">
                        <h4 class="ml-2 mb-0 text-dark">修改用户</h4>
                    </div>
                </div>
            </div>
            <div class="content">
                <div class="container-fluid">
                    <div class="row text-sm mt-4">
                        <div class="col-12">
                            <h6 class="mb-4">修改[${user.username}]用户信息</h6>
                            <form id="user-form">
                                <div class="form-group row mb-4">
                                    <label for="username" class="col-lg-1 col-md-3 col-sm-4 col-form-label font-weight-normal">用户名<small class="text-red">(*必填)</small></label>
                                    <div class="col-lg-3 col-md-4 col-sm-5">
                                        <input type="text" name="username" class="form-control" id="username" readonly disabled value="${user.username}" autocomplete="off">
                                    </div>
                                </div>
                                <div class="form-group row mb-4">
                                    <label for="avatar" class="col-lg-1 col-md-3 col-sm-4 col-form-label font-weight-normal">头像</label>
                                    <div class="col-lg-3 col-md-4 col-sm-5">
                                        <#if (user.avatar)?? && (user.avatar) != "">
                                            <img src="${user.avatar}" style="width: 80px;border-radius: 4px" class="img-fluid mb-2 mr-1 img-avatar" alt="avatar">
                                        <#else>
                                            <img src="${una}/ub-admin/img/avatar-64x64.png" style="width: 80px;border-radius: 4px" class="img-fluid mb-2 mr-1 img-avatar" alt="logo">
                                        </#if>
                                        <input type="hidden" name="avatar" id="avatar" value="${(user.avatar)!''}">
                                        <input type="file" id="avatar-file" onchange="selectFile(this,'avatar')" style="display: none;" accept="image/*">
                                        <div class="btn-group">
                                            <button type="button" onclick="document.getElementById('avatar-file').click()" class="btn btn-sm btn-primary"><i class="fa fa-upload"></i> 上传</button>
                                            <button type="button" onclick="undo(this,'avatar')" aria-url="${(user.avatar)!una+'/ub-admin/img/avatar-64x64.png'}" class="btn btn-sm btn-default"><i class="fa fa-undo"></i> 撤销</button>
                                        </div>
                                        <p class="text-sm text-secondary mt-1">上传个人专属头像(图片大小在100KB以内)</p>
                                    </div>
                                </div>
                                <div class="form-group row mb-4">
                                    <label for="email" class="col-lg-1 col-md-3 col-sm-4 col-form-label font-weight-normal">电子邮箱<small class="text-red">(*必填)</small></label>
                                    <div class="col-lg-3 col-md-4 col-sm-5">
                                        <input type="text" name="email" class="form-control" id="email" value="${user.email}" autocomplete="off">
                                    </div>
                                </div>
                                <div class="form-group row mb-4">
                                    <label for="nickname" class="col-lg-1 col-md-3 col-sm-4 col-form-label font-weight-normal">别名<small class="text-secondary">(选填)</small></label>
                                    <div class="col-lg-3 col-md-4 col-sm-5">
                                        <input type="text" name="nickname" class="form-control" id="nickname" value="${user.nickname}" autocomplete="off">
                                    </div>
                                </div>
                                <div class="form-group row mb-4">
                                    <label for="password" class="col-lg-1 col-md-3 col-sm-4 col-form-label font-weight-normal">角色</label>
                                    <div class="col-lg-1 col-md-1 col-sm-2">
                                        <select name="role" id="role" class="form-control">
                                            <#list roles as role>
                                                <#if user.role == role.getName()>
                                                    <option value="${role.getName()}" selected>${role.getAlias()}</option>
                                                <#else>
                                                    <option value="${role.getName()}">${role.getAlias()}</option>
                                                </#if>
                                            </#list>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <button type="button" id="new-user-btn" class="btn btn-primary mr-2">确认修改</button>
                                    <a class="btn btn-default" href="javascript:history.back(-1);">返回列表</a>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <footer class="main-footer">
            <#include "/admin/inc/footer.html">
        </footer>
    </div>
    <script src="${una}/ub-admin/plugin/jquery/jquery.min.js" type="text/javascript"></script>
    <script src="${una}/ub-admin/plugin/jquery/jquery.serialize.js"></script>
    <script src="${una}/ub-admin/plugin/jquery/jquery.form.js"></script>
    <script src="${una}/ub-admin/plugin/bootstrap/js/bootstrap.bundle.min.js" type="text/javascript"></script>
    <script src="${una}/ub-admin/js/adminlte.js" type="text/javascript"></script>
    <script src="${una}/ub-admin/plugin/layer/layer.js"></script>
    <script src="${una}/ub-admin/js/jquery.validate.min.js"></script>
    <script src="${una}/ub-admin/js/unaboot-admin.core.js" type="text/javascript"></script>
    <script type="text/javascript">
        var form = $("#user-form");
        form.validate({
            errorPlacement: function errorPlacement(error, element) {
                element.after(error);
            },
            rules:{
                nickname:{
                    rangelength:[3,12]
                },
                email:{
                    required:true,
                    email:true,
                    remote:{
                        type:'get',
                        url:'${una}/admin/users/validate/email',
                        data:{
                            email:function(){
                                return $("#email").val();
                            }
                        },
                        dataType:'html',
                        dataFilter:function(data,type){
                            if($("#email").val() == "${user.email}"){
                                return true;
                            }else{
                                if(data === "true"){
                                    return true;
                                }else{
                                    return false;
                                }
                            }
                        }
                    }
                },
                role:{
                    required:true
                }
            },
            messages:{
                nickname: {
                    rangelength:'昵称或用户姓名只允许填写3-12个字符'
                },
                email:{
                    required:"请填写账户邮箱地址",
                    email:"邮箱格式不正确",
                    remote:'邮箱已被注册，请更换新的邮箱'
                },
                role:{
                    required:"请为用户选择角色"
                }
            }
        });
        $("#new-user-btn").on("click",function(){
            var isOk = form.valid();
            if(isOk){
                var data = $("#user-form").serialize();
                var load = layer.load(2,{shade:[0.4,'#f0f0f0']});
                $.ajax({
                    type:'POST',
                    url:'${una}/admin/users/${user.id}',
                    data:data,
                    success:function(){
                        layer.close(load);
                        layer.alert("当前操作已成功执行!",{
                            title:"<i class='fa fa-info'></i> 提示",
                            icon:1,
                            shade:[0.4,"#fff"],
                            shadeClose:false,
                            time:0,
                            btn:['OK'],
                            yes:function(newIndex){
                                layer.close(newIndex);
                                window.location.href="${una}/admin/users/";
                            }
                        });
                    },
                    error:function(){
                        layer.close(load);
                        layer.alert("当前操作失败!请稍后再试。",{
                            title:"<i class='fa fa-info'></i> 提示",
                            icon:1,
                            shade:[0.4,"#fff"],
                            shadeClose:false,
                            time:0,
                            btn:['OK'],
                            yes:function(newIndex){
                                layer.close(newIndex);
                            }
                        });
                    }
                });
            }
        });

        function selectFile(element,selector){
            try {
                var file = element.files[0];
                var size = file.size;
                if(size > 100000){
                    throw "图片超过规定大小";
                }
                var reader = new FileReader();
                reader.onload = function(){
                    var image = new Image();
                    image.src = reader.result;
                    image.onload = function(){
                        var w = image.width,h = image.height;
                        var canvas = document.createElement("canvas");
                        var context = canvas.getContext("2d");
                        $(canvas).attr({width:w,height:h});
                        context.drawImage(image,0,0,w,h);
                        var base64 = canvas.toDataURL("image/png",0.5);
                        var result = {
                            url:window.URL.createObjectURL(file),
                            base64:base64,
                            clearBase64:base64.substr(base64.indexOf(',')+1),
                            suffix:base64.substring(base64.indexOf(',')+1,base64.indexOf(';'))
                        };
                        $("input[id="+selector+"]").val(result.base64);
                        $("img.img-"+selector).attr("src",result.base64);
                    }
                };
                reader.readAsDataURL(element.files[0]);
            }catch (e) {
                alert(e);
            }
        }
        function undo(element,selector){
            var imgSrc = $(element).attr("aria-url");
            $("input[id="+selector+"]").val(imgSrc);
            $("img.img-"+selector).attr("src",imgSrc);
        }
    </script>
</body>
</html>